<script setup>
import {ref} from "vue";
import http from "@/request/http.js";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";
import {Back} from "@element-plus/icons-vue";

const resetPwd = ref({
  'email': '',
  'emailCode': '',
  'newPassword': ''
});
const pwdAgain = ref('')
const formRef = ref()
//表单规则
const rules = {
  "email": [
    {required: true, message: "不可为空"},
    {pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: "邮箱格式错误"}
  ],
  "newPassword": [
    {required: true, message: "不可为空"},
    {pattern: /^(?=.*[0-9])(?=.*[a-zA-Z]).{8,}$/, message: "至少8位数且包含字母、数字"}
  ],
  "emailCode": [
    {required: true, message: "不可为空"}
  ]
}
// 发送邮件按钮信息
const sendButtonText = ref('发送验证码')
const btnDisable = ref(false)
const loading = ref(false)

//登录
const resetPassword = () => {
  formRef.value.validate(async val => {
    //判断两次密码是否一致
    if (resetPwd.value.newPassword !== pwdAgain.value) {
      ElMessage.error("两次密码不一致")
      return
    }

    if (val) {
      const dataVo = await http.put("/user/resetPassword", resetPwd.value)
      let code = dataVo.code
      if (code === 200) {
        ElMessage.success("修改成功")
        router.push('/pwdLogin').then()
      } else {
        ElMessage.error(dataVo.msg)
      }
    } else {
      ElMessage.error("请正确填写表单")
    }
  })
}

//发送邮箱验证码
const sendEmailCode = () => {
  formRef.value.validateField("email", async val => {
    if (val) {
      loading.value = true
      const data = await http.get("/email/getEmailCode?email=" + resetPwd.value.email)
      loading.value = false
      if (data.code === 200) {
        ElMessage.success("发送成功")
        disableSend()
      } else {
        ElMessage.error(data.msg)
      }
    }
  })
}

//禁用按钮时间
const disableTime = 60
const disableSend = () => {
  let time = disableTime
  btnDisable.value = true
  sendButtonText.value = "已发送" + time
  const id = setInterval(() => {
    if (time <= 0) {
      sendButtonText.value = "发送验证码"
      btnDisable.value = false
      clearInterval(id)
      return
    }
    time--
    sendButtonText.value = "已发送" + time
  }, 1000)
}

</script>

<template>
  <el-form ref="formRef" :model="resetPwd" :rules="rules" class="reset-form">
    <el-icon class="back" size="20" @click="router.push('/')">
      <Back/>
    </el-icon>
    <h1 class="form-title">忘记密码</h1>
    <el-form-item label="邮箱:" label-position="left" label-width="70px" prop="email">
      <el-input v-model="resetPwd.email" class="el-input" clearable/>
    </el-form-item>
    <el-form-item label="验证码:" label-position="left" label-width="70px" prop="emailCode">
      <el-input v-model="resetPwd.emailCode" class="el-input,email-code" clearable style="width: 60%" type="text"/>
      <el-button :disabled="btnDisable"
                 :loading="loading"
                 class="send-email-btn"
                 type="default"
                 @click="sendEmailCode">
        {{ sendButtonText }}
      </el-button>
    </el-form-item>
    <el-form-item label="新密码:" label-position="left" label-width="80px" prop="newPassword">
      <el-input v-model="resetPwd.newPassword" class="el-input" clearable type="password"/>
    </el-form-item>
    <el-form-item label="确认密码:" label-position="left" label-width="90px" prop="newPassword">
      <el-input v-model="pwdAgain" class="el-input" clearable type="password"/>
    </el-form-item>
    <el-button class="login-button" type="primary" @click="resetPassword">
      重置密码
    </el-button>
    <router-link to="/pwdLogin">
      <el-button class="pwd-button" type="default">
        密码登录
      </el-button>
    </router-link>
    <router-link to="/register">
      <el-button class="pwd-button" type="default">
        注册
      </el-button>
    </router-link>
  </el-form>
</template>

<style scoped>
.reset-form {
  width: 460px;
  padding: 40px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  /* 柔和阴影 */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px); /* 磨砂玻璃效果 */
  transition: transform 0.3s ease-in-out;
}

.reset-form:hover {
  transform: translateY(-5px); /* 鼠标悬停时轻微上浮 */
}

.form-title {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
  font-size: 35px;
  font-family: 'Arial', sans-serif;
  font-weight: bold;
}

/* 按钮样式 */
.login-button {
  width: 100%;
  font-size: 16px;
  height: 40px;
  border-radius: 8px;
  background-color: #E8770F;
  border-color: #E8770F;
  transition: all 0.3s ease-in-out;
}

.login-button:hover {
  transform: scale(1.02);
  background-color: #f8a050;
  border-color: #f8a050;
}

.pwd-button {
  width: 100%;
  font-size: 16px;
  height: 40px;
  border-radius: 8px;
  margin-top: 10px;
  transition: all 0.3s ease-in-out;
}

.pwd-button:hover {
  transform: scale(1.02);
  border-color: #f8a050;
  color: #f8851e;
  background-color: #faf0e6;
}

.el-input {
  height: 40px;
}


.send-email-btn {
  height: 40px;
  width: 40%;
}

.send-email-btn:hover {
  border-color: #f8a050;
  color: #f8851e;
  background-color: #faf0e6;
}

.registerLink {
  font-size: 15px;
  color: #409eff;
  margin-bottom: 8px;
}

.registerLink:hover {
  font-size: 15px;
  color: #0a81fb;
  text-decoration: underline;
  margin-bottom: 8px;
}

.back {
  transition: all 0.15s linear;
}

.back:hover {
  transform: scale(1.2);
}
</style>